<template>
  <div class="planeSorties" :style="showHead ? '' : 'width:100%'" @click.stop>
    <div v-if="showHead" class="title">
      <div class="name"><div class="content">航空器架次</div></div>
      <el-tooltip effect="dark" content="收起" placement="top">
        <img
          src="/img/cockpit/rightClose.png"
          alt=""
          class="closeArrow"
          @click.stop="closeLeft"
        />
      </el-tooltip>
    </div>
    <div class="card" v-if="changeVisible">
      <!-- 无人机数量 -->
      <div class="UAVNum" :class="{ singleUAVNum: !showHead }">
        <div class="name">
          无人机航空器
          <div class="point" @click="cardHandle('droneNum', '无人机航空器', aircraftData.droneNum)"></div>
        </div>
        <div class="line">
          <div class="leftLine"></div>
          <div class="rightLine"></div>
        </div>
        <div class="number">{{ aircraftData.droneNum || 0 }}</div>
      </div>
      <!-- 飞机数量 -->
      <div class="planeNum" :class="{ singlePlaneNum: !showHead }">
        <div class="name">
          通航航空器
          <div class="point" @click="cardHandle('generalNum', '通航航空器', aircraftData.generalNum)"></div>
        </div>
        <div class="line">
          <div class="leftLine"></div>
          <div class="rightLine"></div>
        </div>
        <div class="number">{{ aircraftData.generalNum || 0 }}</div>
      </div>
      <!-- 总数 -->
      <div class="total" :class="{ isSingle: !showHead }">
        <div class="num">{{ aircraftData.sum || 0 }}</div>
        <div class="totalTitle">航空器总数</div>
      </div>
      <!-- 民航航空器 -->
      <div class="HeiUAVNum" :class="{ singleHeiUAVNum: !showHead }">
        <div class="name">
          民航航空器
        </div>
        <div class="line">
          <div class="leftLine"></div>
          <div class="rightLine"></div>
        </div>
        <div class="number heifei">{{ aircraftData.civilAviationNum || 0 }}</div>
      </div>
      <!-- 其他航空器 -->
      <div class="HeiPlaneNum" :class="{ singleHeiPlaneNum: !showHead }">
        <div class="name">
          其他航空器
          <div class="point" @click="cardHandle('otherNum', '其他航空器', aircraftData.otherNum)"></div>
        </div>
        <div class="line">
          <div class="leftLine"></div>
          <div class="rightLine"></div>
        </div>
        <div class="number heifei">{{ aircraftData.otherNum || 0 }}</div>
      </div>
      <!-- 图标 -->
      <div
        class="image image1"
        :class="{ singleImg1: !showHead, smallImg1: isSmall }"
      ></div>
      <div
        class="image image2"
        :class="{ singleImg2: !showHead, smallImg2: isSmall }"
      ></div>
      <div
        class="image image3"
        :class="{ singleImg3: !showHead, smallImg3: isSmall }"
      ></div>
      <div
        class="image image4"
        :class="{ singleImg4: !showHead, smallImg4: isSmall }"
      ></div>
    </div>
    <div class="cardTwice" v-else>
      <div class="pointLeft" @click="goBackHandle"></div>
      <div class="cardTwiceBox">
        <div class="airVehicle">
          <div class="smallBox droneNumBox" :class="{ singleDroneNumBox: !showHead }" v-if="cardVal === 'droneNum'"></div>
          <div class="smallBox generalNumBox" :class="{ singleGeneralNumBox: !showHead }" v-if="cardVal === 'generalNum'"></div>
          <div class="smallBox otherNumBox" :class="{ singleOtherNumBox: !showHead }" v-if="cardVal === 'otherNum'"></div>
          <div class="airVehicleDiZuo"></div>
        </div>
        <div class="cardTwiceContent">
          <div class="cardTwiceWord">{{ cardNumer }}</div>
          <div class="cardTwiceTitle">{{ cardTitle }}</div>
        </div>
        <div class="arrowRight"></div>
        <div class="cardTwiceImpWord">
          <div v-if="cardVal === 'droneNum'">
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>品牌无人机</div>
              </div>
              <div>{{ detailObj.brandDrone }}</div>
            </div>
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>自制无人机</div>
              </div>
              <div>{{ detailObj.diyDrone }}</div>
            </div>
          </div>
          <div v-if="cardVal === 'generalNum'">
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>私人飞机</div>
              </div>
              <div>{{ detailObj.privateAircraft }}</div>
            </div>
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>微型飞机</div>
              </div>
              <div>{{ detailObj.MicroAircraft }}</div>
            </div>
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>直升机</div>
              </div>
              <div>{{ detailObj.helicopter }}</div>
            </div>
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>旋翼机</div>
              </div>
              <div>{{ detailObj.rotorcraft }}</div>
            </div>
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>滑翔机</div>
              </div>
              <div>{{ detailObj.sailplane }}</div>
            </div>
          </div>
          <div v-if="cardVal === 'otherNum'">
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>航模</div>
              </div>
              <div>{{ detailObj.modelAirplane }}</div>
            </div>
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>飞艇</div>
              </div>
              <div>{{ detailObj.airship }}</div>
            </div>
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>热气球</div>
              </div>
              <div>{{ detailObj.hotAirBalloon }}</div>
            </div>
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>氢气球</div>
              </div>
              <div>{{ detailObj.hydrogenBalloon }}</div>
            </div>
            <div class="cardTwiceAlone">
              <div class="cardTwiceAloneLeft">
                <div class="arrowPoint"></div>
                <div>动力伞</div>
              </div>
              <div>{{ detailObj.poweredParachute }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PlaneSorties",
};
</script>
<script setup>
import {computed, defineProps, ref} from "vue";
import useCockpitStore from "@/store/modules/cockpit";
import {getAircraftSubclass} from "@/api/cockpit/planeSorties";

const props = defineProps({
  showHead: {
    type: Boolean,
    default: true,
  },
  isSmall: {
    type: Boolean,
    default: false,
  },
});
const cockpitStore = useCockpitStore();
let aircraftData = computed(() => {
  return cockpitStore.aircraftData || {};
});

const emits = defineEmits(["closeLeft"]);
const changeVisible = ref(true);
const detailObj = ref({});
const cardNumer = ref("");
const cardTitle = ref("");
const cardVal = ref("");

const closeLeft = () => {
  emits("closeLeft");
};

const cardHandle = (val, name, value) => {
  cardNumer.value = value;
  cardTitle.value = name;
  cardVal.value = val;
  changeVisible.value = false;
  getAircraftSubclass({ type: val }).then(res => {
    if (res.code === 200) {
      detailObj.value = res.data;
    }
  })
}

const goBackHandle = () => {
  changeVisible.value = true;
}

</script>

<style scoped lang="scss">
.planeSorties {
  margin-right: 15px;
  width: 528px;
  z-index: 20;
  .title {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    // align-items: center;

    .name {
      padding-left: 45px;
      width: 486px;
      height: 48px;
      background: url("/img/cockpit/titleBack.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: bottom;
      .content {
        text-align: left;
        font-size: 24px;
        font-family: "YouSheBiaoTiHei";
        font-weight: 400;
        color: rgba(255, 255, 255, 0);
        // text-shadow: 0px 3px 2px #081b1e;

        background: linear-gradient(
          0deg,
          rgba(73, 136, 181, 0.96) 0%,
          rgba(255, 255, 255, 0.96) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .closeArrow {
      position: absolute;
      left: 0;
      width: 50px;
      height: 50px;
      top: -9px;
      right: 10px;
      cursor: pointer;
    }
  }

  .card {
    position: relative;
    width: 100%;
    height: 176px;
    background: url("/img/cockpit/cardBack.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .total {
      position: absolute;
      top: 46px;
      left: 165px;
      width: 198px;
      height: 91px;
      background: url("/img/cockpit/planeSorties.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;

      .num {
        position: absolute;
        top: 22%;
        left: 35.5%;
        min-width: 60px;
        text-align: center;
        font-size: 18px;
        font-family: DigifaceWide;
        font-weight: 400;
        color: #ffffff;
      }

      .totalTitle {
        position: absolute;
        top: 42%;
        left: 35%;
        width: 60px;
        height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .isSingle {
      //width: 32.5%;
      //height: 53%;
      //left: 34%;
      width: 36.5%;
      height: 57%;
      left: 34%;
      top: 20%;
    }

    .name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // width: 108px;
      height: 12px;
      line-height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #02D2DF;

      .point {
        cursor: pointer;
        width: 16px;
        height: 16px;
        background: url("/img/cockpit/turnRight.png") no-repeat;
      }
    }

    .line {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 5px;
      width: 102px;
      height: 1px;

      .leftLine {
        width: 11px;
        height: 1px;
        background: #FFC61F;
      }

      .rightLine {
        width: 91px;
        height: 1px;
        background: #615f58;
      }
    }

    .number {
      margin-top: 7px;
      min-width: 61px;
      height: 15px;
      font-size: 21px;
      font-family: DigifaceWide;
      font-weight: 400;
      color: #999999;
      line-height: 14px;
      text-align: left;
      // text-shadow: 1px 2px 2px rgba(27, 59, 64, 0.8);

      //background: linear-gradient(0deg, #ffffff 0%, #00cadc 100%);
      background: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .number.heifei {
      // text-shadow: 1px 2px 2px rgba(49, 34, 23, 0.8);
      //background: linear-gradient(0deg, #ffffff 0%, #fe5252 100%);
      background: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .UAVNum {
      position: absolute;
      top: 15px;
      left: 32px;
    }
    .singleUAVNum {
      //left: 11%;
      left: 58px;
    }

    .planeNum {
      position: absolute;
      top: 10px;
      right: 77px;
    }
    .singlePlaneNum {
      right: 9%;
    }

    .HeiUAVNum {
      position: absolute;
      bottom: 31px;
      left: 53px;
    }
    .singleHeiUAVNum {
      left: 11%;
    }

    .HeiPlaneNum {
      position: absolute;
      bottom: 31px;
      right: 31px;
    }
    .singleHeiPlaneNum {
      right: 7%;
    }

    .image {
      width: 38px;
      height: 38px;
    }
    .image1 {
      position: absolute;
      top: 21%;
      left: 138px;
      background: url("/img/cockpit/UAV.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .singleImg1 {
      left: 28%;
    }
    .smallImg1 {
    }

    .image2 {
      position: absolute;
      top: 15%;
      left: 308px;
      background: url("/img/cockpit/plane.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .singleImg2 {
      left: 65%;
    }
    .smallImg2 {
      // top: 51px;
      left: 58%;
    }

    .image3 {
      position: absolute;
      top: 65%;
      left: 171px;
      background: url("/img/cockpit/MINHANG2.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .singleImg3 {
      top: 63%;
      left: 186px;
    }
    .smallImg3 {
      top: 63%;
      left: 37%;
    }

    .image4 {
      position: absolute;
      top: 69%;
      left: 330px;
      background: url("/img/cockpit/OTHER.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .singleImg4 {
      left: 65.5%;
    }
    .smallImg4 {
      // top: 172px;
      left: 58%;
    }
  }

  .cardTwice{
    position: relative;
    width: 100%;
    height: 176px;
    background: url("/img/cockpit/cardBack.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .pointLeft{
      width: 16px;
      height: 16px;
      position: absolute;
      left: 4%;
      top: 6%;
      background: url("/img/cockpit/turnLeft.png") no-repeat;
      cursor: pointer;
    }

    .cardTwiceBox{
      position: absolute;
      width: 90%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      left: 5%;

      .airVehicle{
        width: 124px;
        height: 117px;

        .smallBox{
          width: 124px;
          height: 34px;
        }

        .droneNumBox{
          width: 45px;
          height: 48px;
          margin: 0 43px;
          background: url(/img/cockpit/UAV.png) no-repeat;
        }

        .singleDroneNumBox{
          width: 45px;
          height: 48px;
          margin: 0 46px;
          background: url(/img/cockpit/UAV.png) no-repeat;
        }

        .generalNumBox{
          width: 45px;
          height: 48px;
          margin: 0 43px;
          background: url(/img/cockpit/plane.png) no-repeat;
        }

        .singleGeneralNumBox {
          width: 45px;
          height: 48px;
          margin: 0 46px;
          background: url(/img/cockpit/plane.png) no-repeat;
        }

        .otherNumBox{
          width: 37px;
          height: 39px;
          margin: 0 49px;
          background: url(/img/cockpit/OTHER.png) no-repeat;
        }

        .singleOtherNumBox{
          width: 37px;
          height: 39px;
          margin: 0 50px;
          background: url(/img/cockpit/OTHER.png) no-repeat;
        }

        .airVehicleDiZuo{
          width: 129px;
          height: 79px;
          background: url("/img/cockpit/diZuo.png") no-repeat;
        }
      }

      .cardTwiceContent{
        min-width: 80px;
        height: 80px;
        text-align: center;
        display: flex;
        flex-flow: column;
        justify-content: space-around;

        .cardTwiceWord{
          font-family: DigifaceWide;
          font-size: 20px;
          font-weight: 400;
          color: #FFFFFF;
        }
        .cardTwiceTitle{
          color: #02D2DF;
        }
      }

      .arrowRight{
        width: 69px;
        height: 31px;
        background: url("/img/cockpit/arrowLeftToRight.png") no-repeat;
      }

      .cardTwiceImpWord{
        //border: 1px red solid;
        min-width: 130px;
        height: 78%;
        color: #FCFCFC;
        display: flex;
        justify-content: space-around;
        flex-flow: column;

        .cardTwiceAlone{
          display: flex;
          align-items: center;
          font-size: 14px;
          width: 100%;
          margin: 6% 0;
          justify-content: space-between;

          .cardTwiceAloneLeft{
            //border: 1px red solid;
            font-size: 14px;
            display: flex;
            align-items: center;
          }

          .arrowPoint{
            width: 3px;
            height: 3px;
            background: #fff;
            border-radius: 1.5px;
            margin-right: 10px;
          }
        }

      }
    }

  }
}
</style>
